<template>
     <div ref="pages">
      <span class="news-text">{{titleName}}</span>
      <a-divider style="margin-top:20px;margin-bottom:20px;" />
      <div class="search-div">
          <a-input v-model="queryinput" placeholder="请输入企业名称" allow-clear style="font-size:12px;" @change="inputFun"/>
          <a-button type="primary" class="report-search-btn" @click="onQuery">查询</a-button>
       </div>

      <div class="unit-table-div">
          <CustomTable
            :onRowClick="onDetail"
            ref="table"
            :showAlert="false"
            :showSelection="false"
            :columns="columns"
            :loading="load"
            @change="onTableChange"
            :dataSource="pageData"
            rowKey="id"
          >
            <template slot="xh" slot-scope="text, record, index">
              {{((pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1))>9?(pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1) :'0' + (index + 1) }}
            </template>
            <!-- <template slot="createDate" slot-scope="record">
             <span v-if="record!=='' && record!==null">{{ moment(record).format("YYYY-MM-DD") }}</span>
          </template> -->
            <template slot="typeDw" slot-scope="text">
<!--              <div>666</div>-->
<!--              <div>{{ text }}</div>-->
              <span>{{ dictText('单位类别',text) }}</span>
            </template>
          </CustomTable>
      </div>
    </div>
</template>

<script>
// import moment from "moment";
import emv from "@/views/center/emptyVue.vue";
import api from '@/api/index'
import moment from "moment";
  export default {
    name: "unit",
    props: {
      page: {
        type: String,
        default: '1'
      },
    },
     data(){
      return{
        clientHeight:'',
        screenHeight:'',
        pageName:"designPage",
        titleName:"设计",
        load: false,
        queryinput:'',
        columns: [
          {
              title: '序号',
              dataIndex: 'xh',
              key: 'xh',
              width:80,
              scopedSlots: { customRender: "xh" }
            },
            {
              title: '企业名称',
              dataIndex: 'nameDwzw',
              key: 'nameDwzw',
              ellipsis: true,
              scopedSlots: { customRender: "nameDwzw" }
            },
            {
              title: '单位类别',
              dataIndex: 'typeDw',
              key: 'typeDw',
              width:250,
              ellipsis: true,
              scopedSlots: { customRender: "typeDw" }
            },
            {
              title: '法人代表',
              dataIndex: 'representFr',
              key: 'representFr',
              ellipsis: true,
              scopedSlots: { customRender: "representFr" }
            },
            {
              title: '发布时间',
              dataIndex: 'createDate',
              key: 'createDate',
              ellipsis: true,
              scopedSlots: { customRender: "createDate" }
            },
        ],
        pageData: [],
        pageFilter: {
          typeDw:'设计',
          pageNo: 1,
          pageSize: 10,
          isPass:true,
        },
        dictDW:[]
      }

    },
    mounted(){
      console.log(1)
      this.setFootStyle();
      this.dictList()
      // if(this.$route.query){
      //   this.queryinput = this.$route.query.queryinput;
      //   console.log(2)
      //   this.onQuery()
      // }
      if(localStorage.getItem('contentHeader') !== undefined){
        console.log(localStorage.getItem('contentHeader'),3)
        this.pageFilter.nameDwzw = localStorage.getItem('contentHeader')
        this.queryinput = localStorage.getItem('contentHeader')
        this.onQuery()
      } else if(this.queryinput){
        console.log(4)
        this.pageFilter.nameDwzw = this.queryinput;
        this.onQuery()
      } else if(this.$route.query) {
        console.log(5)
        this.pageFilter.nameDwzw = this.$route.query.queryinput
        this.onQuery()
      }
    },
    created() {
      this.queryinput = this.$route.query.queryinput;
      console.log(6)
    },
    watch: {
      $route(data) {
        if(!data){
          console.log(data)
          // this.getBreadcrumb();
          // this.pageFilter.typeDw = '设计'
          // this.defaultKey=this.menuData[0].key;
        } else {

          // this.onQuery()
        }
      },
      queryinput(){
        if(this.queryinput === ''){
          localStorage.removeItem('contentHeader')
        }

      }
    },
    methods: {
      inputFun(val){
        if(val.target._value === ''){
          localStorage.removeItem('contentHeader')
        }
      },
      //字典获取
      dictList(){
        api.get_dict().then(ser => {
          this.dictDW = ser
          console.log(this.dictDW)
        })
      },
      dictText(val,text){
        let list = []
        var arr = (text || '').split(`,`)
        for(let item of arr){
          for(let index of this.dictDW){
            if(item === index.dictValue && val === index.dictType){
              list.push(index.dictLabel)
            }
          }
        }
        if(list.length !== 0){
          return list.toString()
        } else {
          return text
        }

      },
      itemRender(current, type, originalElement) {
        if (type === 'prev') {
          return <a><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>上一页</a>;
        } else if (type === 'next') {
          return <a>下一页<i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a>;
        }
        return originalElement;
      },
      getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}`
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
      onDetail(record){

          this.$router.push({
              name:"unitDetail",
              pageName:this.pageName,
              query:{
                type:'detail',
                id:record.id,
                breadcrumbName:'从业单位'

             }
            });

        },
      setPage(pageName,titleName){
        this.pageName = pageName;
        this.titleName = titleName;
        if(pageName=='designPage'){//设计
          this.pageFilter.typeDw='16'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='constructionPage'){//施工
          this.pageFilter.typeDw='13'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='informationizePage'){//信息化
          this.pageFilter.typeDw='20'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='supervisorPage'){//监理
          this.pageFilter.typeDw='14'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='agencyPage'){//招标代理
          this.pageFilter.typeDw='18'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='qualityInspectionPage'){//质量检测
          this.pageFilter.typeDw='19'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='surveyPage'){//勘察单位
          this.pageFilter.typeDw='15'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='consultingPage'){//咨询单位
          this.pageFilter.typeDw='42'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='machineryPage'){//机械制造单位
          this.pageFilter.typeDw='17'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        }else if(pageName=='otherPage'){//其他单位
          this.pageFilter.typeDw='21'
          this.pageFilter.pageNo = 1;
          this.refreshTable();
        } else if (pageName=='all') { // 全部
          this.pageFilter.pageNo = 1;
          console.log('all')
          if(this.queryinput === ''){
            this.refreshTable(1)
          }

        }
      },
      onTableChange(pageFilter) {
         this.pageFilter = { ...this.pageFilter, ...pageFilter };
         this.refreshTable();
      },

     async refreshTable(val) {
        if(val === 1){
          this.pageFilter.typeDw = ''
        }
        this.load = true;
        await api.get_unit_list(this.pageFilter) .then(res => {
          let pageNo = this.pageFilter.pageNo;
          let pageSize = this.pageFilter.pageSize;
          let records = res.rows;
          let total = res.total;
          this.pageData = {
            ...this.pageData,
            pageNo,
            records,
            pageSize,
            total
          };
          this.load = false;

        })
        .catch(err => {
          this.load = false;
        });
        this.setFootStyle();

      },
    onQuery() {
      // console.log(this.queryinput === undefined)
      // console.log(this.queryinput)
      this.$router.push({
        path:'/center/workingUnitPage/all'
      })
      this.titleName = ''
      this.pageFilter.typeDw = ''
      this.pageFilter.nameDwzw = this.queryinput;
      this.pageFilter.pageNo = 1;
      this.refreshTable();
    },
    setFootStyle(){
      this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>30){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",30);
                    }
                  }else{
                    emv.$emit("setfootmargintop",30);
                  }

          });
    }
   },
   beforeRouteEnter(to, from, next) {
      // 设置下一个路由的 meta
       next(vm=>{
            vm.setPage(to.name, to.meta.title);
            emv.$emit("setMenuKey",to.meta.mkey);
            console.log(to)
         })
    },
  };
</script>
<style lang="less">
.news-text{
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337BD7;
}

.unit-table-div{
  margin-left: -10px;
  .ant-table-thead > tr > th {
    padding: 16px 16px;
    overflow-wrap: break-word;
    font-size: 16px;
  }
  .ant-table-tbody > tr > td {
      padding: 16px 16px;
      overflow-wrap: break-word;
      font-size: 14px;
  }
}

.search-div{
  width:320px;
  display:flex;
  margin-bottom: 20px;
  // margin-top: 10px;
  .report-search-btn{
    // width: 80px;
    height: 40px;
    background: #337bd7;
    border: 0;
    border-radius: 4px;
    margin-left: 10px;
    margin-top: 1px;
    font-size: 14px;
  }
  .ant-btn-primary:hover, .ant-btn-primary:focus {
    color: #fff;
    background-color: #337BD7;
    border-color: #337BD7;
  }
  .ant-input-affix-wrapper .ant-input {
    position: relative;
    text-align: inherit;
    height: 41px;
  }
}
</style>
